<template>
  <div class="box">
    <Header>
      <!-- <router-link to='/home' tag='i' class="iconfont icon-jiantou1" slot='left'></router-link> -->
      详情
    </Header>
    <div class="pro-content">
      <div class="proimg">
        <img :src="proimg" alt="">
      </div>
      <div class="proinfo">
        <h2 class="pro-title">{{ proname }}</h2>
        <p class="pro-price">￥{{ middlep }} ~ {{ bigp }}</p>
        <p class="protype">杯型 中杯、大杯</p>
        <p class="profree">配送费：包邮</p>
        <p class="propost">
          <span>取货方式</span>
          <span class="iconfont icon-xianshi_xuanzetianchong">点餐</span>
        </p>
        <div class="pro-detail">
          <p class="detail-top">
            <span class="line-left line"></span>
            <span class="iconfont icon-wenhao">&nbsp;详情</span>
            <span class="line-right line"></span>
          </p>
          <p class="title">产品详情</p>
          <div class="detail-msg">
            <p>
              {{ node }}
            </p>
          </div>
        </div>
    </div>
    </div>
    <footer class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="cart-o" text="购物车" @click="cart"/>
        <van-goods-action-icon icon="like-o" text="收藏" :info="storeNum" @click="store" />
        <van-goods-action-icon icon="service-o" text="客服" info="12" />
        <van-goods-action-button type="warning" text="加入购物车" @click="add"/>
        <!-- <van-goods-action-button type="danger" text="立即购买" @click="add"/> -->
      </van-goods-action>
    </footer>
    <div class="goods-detail-nav">
      <span type="primary" @click="goshare" class="iconfont icon-fenxiang3"></span>
      <van-overlay :show="show" @click="show = false">
        <div class="sharebox" @click.stop>
          <div class="imgbox">
            <img :src="proimg" alt="">
          </div>
          <div class="shareinfo">
            <div class="infoleft">
              <p class="name"> {{ proname }} </p>
              <p class="price"> ￥{{ middlep }} ~ {{ bigp }} </p>
              <p class="tip">Tip:按住alt,左键点击保存图片</p>
            </div>
            <div class="inforight">
              <img src="http://hbimg.b0.upaiyun.com/dcced0d539f4d9fe3fc6b9227aaddf81c4d152b9370de-XmhgcF_fw658" alt="">
            </div>
          </div>
          <div class="save" @click="save">
            <a :href="proimg" :download="proname">保存图片</a>
          </div>
        </div>
      </van-overlay>
      <span class="iconfont icon-dianpu" @click="gohome"></span>
      <span class="iconfont icon-liebiao" @click="goorder"></span>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import Vue from 'vue'
import Header from '@/components/header.vue'
import {
  GoodsAction,
  GoodsActionButton,
  GoodsActionIcon,
  Toast,
  Sku,
  Overlay
} from 'vant'

Vue.use(Overlay)
Vue.use(Sku)
Vue
  .use(GoodsAction)
  .use(GoodsActionButton)
  .use(GoodsActionIcon)
Vue.use(Toast)
export default {
  data () {
    return {
      proid: '',
      proname: '',
      proimg: '',
      middlep: '',
      bigp: '',
      node: '',
      storeflag: true,
      storeNum: 0,
      show: false,
      scid: ''
    }
  },
  components: {
    Header
  },
  methods: {
    cart () {
      this.$router.push('/cart')
    },
    add () {
      var userid = localStorage.userid
      var price = this.bigp || this.middlep
      axios.get('/cart/add?userid=' + userid + '&proid=' + this.proid + '&num=1&price=' + price).then(() => {
        Toast('加入购物车成功')
      })
    },
    store () {
      var userid = localStorage.userid
      if (this.storeflag) {
        this.storeflag = false
        this.storeNum = 1
        axios.get('/shoucang/add?userid=' + userid + '&proid=' + this.proid).then(() => {
          Toast('收藏成功')
        })
      } else {
        this.storeflag = true
        this.storeNum = 0
        axios.get('/shoucang/del?scid=' + this.scid).then(() => {
          Toast('取消收藏成功')
        })
      }
    },
    joincart () {
      Toast.success('加入购物车成功')
    },
    goshare () {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '载入中...'
      })
      let second = 3
      const timer = setInterval(() => {
        second--
        if (second) {
          toast.message = `正在生成分享`
        } else {
          clearInterval(timer)
          // 手动清除 Toast
          Toast.clear()
          this.show = true
        }
      }, 1000)
    },
    gohome () {
      this.$router.push('/home')
    },
    goorder () {

    },
    save () {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '下载中...'
      })
      let second = 3
      const timer = setInterval(() => {
        second--
        if (second) {
          toast.message = `分享保存成功`
        } else {
          clearInterval(timer)
          // 手动清除 Toast
          Toast.clear()
          this.show = true
        }
      }, 1000)
    }
  },
  created () {
    var userid = localStorage.userid
    const proid = this.$route.params.proid
    axios.get('/pro/detail?proid=' + proid).then(res => {
      this.proid = res.data[0].proid
      this.proname = res.data[0].proname
      this.proimg = res.data[0].proimg
      this.middlep = res.data[0].middlep
      this.bigp = res.data[0].bigp
      this.node = res.data[0].node
    })
    axios.get('/shoucang?userid=' + userid).then(res => {
      if (res.data.code !== '303') {
        res.data.data.map(item => {
          if (item.proid === this.proid) {
            this.storeNum = 1
            this.scid = item.scid
            this.storeflag = false
          }
        })
      }
    })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .box {
    header {
      @include flexbox();
      @include justify-content(space-between);
    }
    .van-overlay {
      .sharebox {
        margin-top: 130px;
        margin-left: 48px;
        width: 2.80rem;
        height: 3.9rem;
        border-radius: 5px;
        text-align: center;
        background: #fff;
        display: flex;
        flex-direction: column;
        .imgbox {
        width: 100%;
        height: 2.6rem;
        padding: 10px;
          img {
            width: 2.60rem;
            height: 2.4rem;
          }
        }
        .shareinfo {
          width: 2.60rem;
          flex: 1;
          display: flex;
          padding: 0 10px;
          .infoleft {
            width: 1.8rem;
            text-align: left;
            .name {
            font-size: 12px;
            }
            .price {
              font-size: 12px;
              color: #ff7100;
              padding-top: 10px;
            }
            .tip {
              font-size: 12px;
              color: #f66;
              padding-top: 10px;
            }
          }
          .inforight {
            @include rect(0.7rem, 0.7rem);
            img {
              @include rect(0.7rem, 0.7rem);
            }
          }
        }
        .save {
          a {
            display: inline-block;
            width: 1.5rem;
            margin: 0 auto;
            color: #fff;
            font-size: .14rem;
            line-height: .35rem;
            border-radius: .02rem;
            text-align: center;
            background: #ff7100;
            margin-bottom: 0.15rem;
          }
        }
      }
    }
    .pro-content {
      @include overflow();
      .proimg {
        @include rect(100%,3.75rem);
        img {
          @include rect(100%,3.75rem);
        }
      }
    }
    .proinfo {
      padding: 10px;
      .protitle {
        padding-bottom: 10px;
        font-size: 16px;
      }
      .pro-price {
        color: #FF7100;
        font-size: 20px;
      }
      .protype {
        color: #666;
        font-size: 13px;
      }
      .profree {
        color: #666;
        font-size: 12px;
        margin-top: 5px;
      }
      .propost {
        display: flex;
        justify-content: space-between;
        span {
          color: #666;
          font-size: 12px;
        }
      }
      .pro-detail {
        .detail-top {
          padding: 10px;
          margin-top: 10px;
          font-size: 12px;
          color: #B2B2B2;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #F4F4F4;
          .line {
            display: inline-block;
            width: 46px;
            height: 1px;
            background-color: #ccc;
          }
          .line-left {
            margin-right: 4px;
          }
          .line-right {
            margin-left: 4px;
          }
        }
        .title {
          padding: 10px 10px 10px 0;
          font-size: 14px;
          color: #333;
        }
        .detail-msg {
          width: 100%;
          height: 150px;
          p {
            width: 100%;
            height: 43px;
            line-height: 43px;
          }
        }
      }
    }
    .goods-detail-nav {
      position: fixed;
      top: 0.4rem;
      bottom: 0;
      padding-top: 5%;
      width: 100%;
      height: .74rem;
      text-align: center;
      display: flex;
      align-items: center;
      padding-left: 2.2rem;
      span, van-button{
        position: relative;
        margin-right: .15rem;
        font-size: .22rem;
        width: .37rem;
        height: .37rem;
        line-height: .37rem;
        color: #fff;
        background-color: rgba(0,0,0,.4);
        border-radius: 50%;
        display: inline-block;
      }
    }
  }
</style>
